<!DOCTYPE html>


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>

<div id="example"></div>

<div id="linkbutton"></div>

<div id="message"></div>

<div id="time"></div>

<div id="life"></div>

<script type="text/babel">
    var Button = React.createClass({
        getInitialState: function() {
            return {
                data:0
            };
        },
        setNewNumber: function() {
            this.setState({data: this.state.data + 1})
        },
        render: function () {
            return (
                <div>
                    <button onClick = {this.setNewNumber}>INCREMENT</button>
                    <Content myNumber = {this.state.data}></Content>
                </div>
            );
        }
    })
    var Content = React.createClass({
        componentWillMount:function() {
            console.log('Component WILL MOUNT!')
        },
        componentDidMount:function() {
            console.log('Component DID MOUNT!')
        },
        componentWillReceiveProps:function(newProps) {
            console.log('Component WILL RECEIVE PROPS!')
        },
        shouldComponentUpdate:function(newProps, newState) {
            return true;
        },
        componentWillUpdate:function(nextProps, nextState) {
            console.log('Component WILL UPDATE!');
        },
        componentDidUpdate:function(prevProps, prevState) {
            console.log('Component DID UPDATE!')
        },
        componentWillUnmount:function() {
            console.log('Component WILL UNMOUNT!')
        },

        render: function () {
            return (
                <div>
                    <h3>{this.props.myNumber}</h3>
                </div>
            );
        }
    });
    ReactDOM.render(

        <div>
            <Button />
        </div>,
        document.getElementById('life')
    );
</script>

<script type="text/babel">

    var Hello=React.createClass({

            getInitialState:function () {

                return{opacity:10};
            },

        componentDidMount:function () {

                this.timer=setInterval(function () {

                    var opacity=this.state.opacity;

                    opacity-=0.2;

                    if (opacity<0.1){

                        opacity=1.0;
                    }

                    this.setState(

                        {opacity:opacity}
                    );

                }.bind(this),100);

        },

        render:function () {

                return(
                    <div style={{opacity:this.state.opacity}}>

                        Hello{this.props.name}
                    </div>
                );
        }
    }


    );

    ReactDOM.render(

        <Hello name="World"/>,

        document.getElementById('time')
    );


</script>

<script type="text/babel">

    var Counter=React.createClass({

        getInitialState:function () {

            return{clickCount:0};
        },

        handleClick:function () {

            this.setState(function (state) {

                return{clickCount:state.clickCount+1};
            });
        },

        render:function () {

            return(<h2 onClick={this.handleClick}> 点我！点击的次数为：
                {this.state.clickCount}</h2>);
        }
    });


    ReactDOM.render(
        <Counter/>,
        document.getElementById('message')
    );


</script>

<script  type="text/babel">


    var LinkButton=React.createClass({

        getInitialState:function () {

            return{liked:false};
        },

        handleClike:function (event) {

            this.setState({liked:!this.state.liked});

        },

        render:function () {

            var text=this.state.liked?'喜欢':'不喜欢';

            return(<p  onClick={this.handleClike}>
                你<b>{text}</b>我。点我切换状态。
            </p>);
        }
    });


    ReactDOM.render(
        <LinkButton/>,

        document.getElementById('linkbutton')
    );

</script>



<script type="text/babel">
    var WebSite = React.createClass({
        render: function() {
            return (
                <div>
                    <Name name={this.props.name} />
                    <Link site={this.props.site} />
                </div>
            );
        }
    });

    var Name = React.createClass({
        render: function() {
            return (
                <h1>{this.props.name}</h1>
            );
        }
    });

    var Link = React.createClass({
        render: function() {
            return (
                <a href={this.props.site}>
                    {this.props.site}
                </a>
            );
        }
    });

    ReactDOM.render(
        <WebSite name="菜鸟教程" site=" http://www.runoob.com" />,
        document.getElementById('example')
    );
</script>
</body>
</html>